<!--家政培训-->
<template>
	<div class="homeMarkTrain">
		<div>
			
			<div style="width: 100%;position: relative;display: flex;justify-content: center;">
			<img class="banner"  src="../../../../static/img/homeMarkTrain/homeMarkTrain-banner.png" />
				<div style="margin:0 auto;position: absolute;top: 40%;text-align: center;color: white;font-size: 22px;">
					<p class="banner-title">家政培训</p>
					<p class="banner-text">HOMEMAKING&TRAINING</p>
				</div>
			</div>
			
			
			<div style="background-color: #f7f7f7;width: 100%;">
				<div class="small-hiddle" style="height: 1px;width: 800px;background-color: #eeeeee;margin: 0 auto;margin-top: -1px;"></div>
				
				<div class="body-card">
					<Row type="flex" align="middle" >
						<Col :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<div class="body-card-width">
									<img style="width: 100%;" src="../../../../static/img/homeMarkTrain/homeMarkTrain_1.png"/>
									<div style="text-align: center;">
										<p class="body-title">
											母婴护理师
										</p>
										<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
											月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
										</p>
										<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
											￥199
										</p>
									</div>
								</div>
							</div>
						</Col>
						<Col :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<div class="body-card-width">
									<img style="width: 100%;" src="../../../../static/img/homeMarkTrain/homeMarkTrain_4.png"/>
									<div style="text-align: center;">
										<p class="body-title">
											精品育婴师
										</p>
										<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
											月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
										</p>
										<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
											￥199
										</p>
									</div>
								</div>
							</div>
						</Col>
						<Col :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<div class="body-card-width">
									<img style="width: 100%;" src="../../../../static/img/homeMarkTrain/homeMarkTrain_2.png"/>
									<div style="text-align: center;">
										<p class="body-title">
											产后康复师
										</p>
										<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
											月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
										</p>
										<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
											￥199
										</p>
									</div>
								</div>
							</div>
						</Col>
						<Col :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<div class="body-card-width">
									<img style="width: 100%;" src="../../../../static/img/homeMarkTrain/homeMarkTrain_4.png"/>
									<div style="text-align: center;">
										<p class="body-title">
											高级小儿推拿
										</p>
										<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
											月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
										</p>
										<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
											￥199
										</p>
									</div>
								</div>
							</div>
						</Col>
						<Col  :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<div class="body-card-width">
									<img style="width: 100%;" src="../../../../static/img/homeMarkTrain/homeMarkTrain_3.png"/>
									<div style="text-align: center;">
										<p class="body-title">
											高级厨艺
										</p>
										<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
											月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
										</p>
										<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
											￥199
										</p>
									</div>
								</div>
							</div>
						</Col>
						<Col  :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<div class="body-card-width">
									<img style="width: 100%;" src="../../../../static/img/homeMarkTrain/homeMarkTrain_5.png"/>
									<div style="text-align: center;">
										<p class="body-title">
											精品收纳
										</p>
										<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
											月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
										</p>
										<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
											￥199
										</p>
									</div>
								</div>
							</div>
						</Col>
						
					</Row>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value2:false,
//				menu_tab:[
//					{"label": "全部","value": "all"},
//					{"label": "保洁清洗","value": "1"},
//					{"label": "搬家搬厂","value": "2"},
//					{"label": "家电维修","value": "3"},
//					{"label": "家政培训","value": "4"},
//				],
				colorList:[
					"#fff2b5","#ffd661","#8cd6b5","#ff8c78","#8a8cb2","#fa6e85","#de9dd6","#dbf977","#97ec71","#4fc5c7"
				],
				tabSelect:0,
			}
		},

		methods:{
			toggleTab:function(index){
				this.tabSelect = index;
			},
//			goCleanHouse:function(){
//				this.$router.push("/homeMakingServe/cleanHouse")
//			},
//			goMoveHouse:function(){
//				this.$router.push("/homeMakingServe/moveHouse")
//			},
//			goHomeRepair:function(){
//				this.$router.push("/homeMakingServe/homeRepair")
//			},
//			goHomeMarkingTrain:function(){
//				this.$router.push("/homeMakingServe/homeMarkingTrain")
//			},
		}
	}
</script>

<style lang="css" scoped>
	/** 电脑 **/
	
	@media only screen and (min-width: 540px){
		.homeMarkTrain >>> .banner-title{
			font-size: 50px;
			text-shadow: 1px 1px 1px #000000
		}
		.homeMarkTrain >>> .banner-text{
			font-size: 28px;
			text-shadow: 1px 1px 1px #000000
		}
		.homeMarkTrain >>>.banner{
			width: 100%;
			height: 300px;
		}
		.homeMarkTrain >>> .m-menu{
			display: none;
		}
		.homeMarkTrain >>> .body-title{
			font-size: 22px;
			color: #000000;
			padding: 15px 20px;
		}
		.homeMarkTrain >>> .body-card{
			padding-top: 10px;
			width: 1200px;
			margin: 0 auto;
		}
		.homeMarkTrain >>> .body-card-width{
			cursor: pointer;
			margin:23px;
			background-color: white;
		}
		.homeMarkTrain >>> .active1{
			color: green;
		}
		
	}
	/** 手机 **/
	@media only screen and (max-width: 540px) {
		.homeMarkTrain >>> .banner-title{
			font-size: 28px;
			text-shadow: 1px 1px 1px #000000
		}
		.homeMarkTrain >>> .banner-text{
			font-size: 18px;
			text-shadow: 1px 1px 1px #000000
		}
		.homeMarkTrain >>>.banner{
			width: 100%;
			height: 150px;
		}
		
		.homeMarkTrain >>> .body-card{
			width: 100%;
		}
		.homeMarkTrain >>> .body-title{
			font-size: 16px;
			padding: 10px 20px;
		}
		.homeMarkTrain >>> .body-card-width{
			margin:5px;
			background-color: white;
		}
		.homeMarkTrain >>> .body-card-text{
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.homeMarkTrain >>> .m-menu{
			width: 90%;
			margin: 0 auto;
			padding-top: 10px;
		}
		
		.homeMarkTrain >>> .small-hiddle {
			display: none !important;	
		}
		.homeMarkTrain >>> .active1{
			color: green;
		}
	}
	
</style>